<template>
  <header>
    <div class="Header post-f" :style="{'background': top > 20 || !isNotIndex ? '#fff' : '', 'box-shadow': top > 20 || !isNotIndex ? '0px 0px 5px #ccc' : '' }">
      <div class="cont pt-10 pb-10 flex just-auto post-r">
        <div class="row-2 row-md-3 row-xs-6 pr-20">
          <router-link to="/">
            <img class="block row-12 pr-20 row-sm-12" src="/images/Public/logo.png" alt="智慧明医logo">
          </router-link>
        </div>
        <div class="nav row-9 row-md-9 flex item-center">
          <ul class="oh flex just-auto sm-hide">
            <li class="flex item-center">
              <router-link to="/" class="font-18 post-r" :class="{'active' : name == 'Index' }">
                首页
              </router-link>
            </li>
            <li class="flex item-center">
              <router-link to="/exports" class="font-18 post-r" :class="{'active' : name == 'Exports' }">
                免费问医生
              </router-link>
            </li>
            <li class="flex item-center">
              <router-link to="/reserve" class="font-18 post-r" :class="{'active' : name == 'Reserve' }">
                预约明医
              </router-link>
            </li>
            <li class="flex item-center">
              <router-link to="/science" class="font-18 post-r" :class="{'active' : name == 'Science' }">
                明医科普
              </router-link>
            </li>
            <li class="flex item-center">
              <router-link to="/settle" class="font-18 post-r" :class="{'active' : name == 'DoctorsSettle' }">
                医生入驻
              </router-link>
            </li>
            <li class="flex item-center">
              <router-link to="/about" class="font-18 post-r" :class="{'active' : name == 'AboutUS' }">
                关于我们
              </router-link>
            </li>
          </ul>
          <div class="mobile-bar hide sm-show item-center pt-4 pb-4 pr-10 pl-10 radius-5" :style="{'border-color': showMobile ? '#ff9f00' : '','background': top > 20 ? '' : 'rgba(255,255,255,0.7)' }" @click="showMobile = !showMobile ">
            <i class="icon-nav font-16 block mt-2" :class="{ 'showMobile' : showMobile }" />
            <span class="font-18 ml-5">目录</span>
          </div>
        </div>
      </div>
      <ul v-if="showMobile" class="mobile-nav hide sm-show post-r">
        <li class="flex item-center pt-10 pr-20 pb-10 pl-10" @click="showMobile = !showMobile ">
          <router-link to="/" class="font-18 post-r" :class="{'active fw' : name == 'Index' }">
            首页
          </router-link>
        </li>
        <li class="flex item-center pt-10 pr-20 pb-10 pl-10" @click="showMobile = !showMobile ">
          <router-link to="/exports" class="font-18 post-r" :class="{'active fw' : name == 'Exports' }">
            免费问医生
          </router-link>
        </li>
        <li class="flex item-center pt-10 pr-20 pb-10 pl-10" @click="showMobile = !showMobile ">
          <router-link to="/reserve" class="font-18 post-r" :class="{'active fw' : name == 'Reserve' }">
            预约明医
          </router-link>
        </li>
        <li class="flex item-center pt-10 pr-20 pb-10 pl-10" @click="showMobile = !showMobile ">
          <router-link to="/science" class="font-18 post-r" :class="{'active fw' : name == 'Science' }">
            明医科普
          </router-link>
        </li>
        <li class="flex item-center pt-10 pr-20 pb-10 pl-10" @click="showMobile = !showMobile ">
          <router-link to="/settle" class="font-18 post-r" :class="{'active fw' : name == 'DoctorsSettle' }">
            医生入驻
          </router-link>
        </li>
        <li class="flex item-center pt-10 pr-20 pb-10 pl-10" @click="showMobile = !showMobile ">
          <router-link to="/about" class="font-18 post-r" :class="{'active fw' : name == 'AboutUS' }">
            关于我们
          </router-link>
        </li>
      </ul>
    </div>
  </header>
</template>

<script>
export default {
  data () {
    return {
      name: this.$route.name,
      showMobile: false,
      top: 0,
      isNotIndex: true
    }
  },
  watch: {
    $route (to) {
      this.name = to.name
    },
    'name' () {
      switch (this.name) {
        case 'Index':
          this.isNotIndex = true
          break
        case 'Exports':
          this.isNotIndex = true
          break
        case 'Reserve':
          this.isNotIndex = true
          break
        case 'Science':
          this.isNotIndex = true
          break
        case 'DoctorsSettle':
          this.isNotIndex = true
          break
        case 'AboutUS':
          this.isNotIndex = true
          break
        default:
          this.isNotIndex = false
          break
      }
    }
  },
  mounted () {
    // $(window).scroll(() => {
    //   const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
    //   this.top = top
    // })
  }
}
</script>

<style scopde lang="scss">
    .Header{
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 9;
    }

    .cont{
        z-index: 1;
    }

    .nav ul{
        width: 100%;
        height:100%;
        li{
            height:100%;
        }
    }

    .nav a:hover::before,
    .active::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 4px;
        background: #e84931;
        border-radius: 50px;
        bottom: -10px;
        transition: .3s;
    }

    .mobile-bar{
        margin-left: auto;
        border: 1px solid #7d7d7d;
        color: #130b0d;
    }

    .showMobile{
        transform: rotate(180deg);
        color: #ff9f00;
    }

    .showMobile~span{
        color: #ff9f00;
    }

    .mobile-nav{
        z-index: 1;
        background: white;
    }

    @media screen and (max-width:768px) {
        .mobile-bar{
            display: flex;
        }
    }

</style>
